<template>
    <div>
      <el-card >
        <el-form
          :model="form"
          label-position="right"
          ref="formRef"
          :rules="formRules"
        >
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="编号">
                <el-input
                  v-model="form.number"
                  placeholder="不输入则自动生成"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="产品中文名称" required>
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="产品英文名" required>
                <el-input v-model="form.englishName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
              <el-form-item label="产品类别" required>
                <el-tree-select
                  v-model="form.mtlKindId"
                  :data="parentData"
                  :render-after-expand="false"
                  :check-strictly="true"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="中文单位" required>
                <el-select
                  v-model="form.unitId"
                  clearable
                  placeholder="请选择："
                >
                  <el-option
                    v-for="item in configData.unitList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="英文单位" required>
                <el-select
                  v-model="form.subUnitId"
                  clearable
                  placeholder="请选择："
                >
                  <el-option
                    v-for="item in configData.subUnitList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="订舱英文名" required>
                <el-input v-model="form.bookingSpaceEnName"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="所属客户" >
                <ts-select v-model="form.custId" file-name="CustReport" :template="custTemplate" :input-width="300" :label="form.custName"/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="报关单中文名" required>
                <el-input v-model="form.customsDeclarationName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="报关单英文名" required>
                <el-input v-model="form.customsDeclarationEnName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="海关编码" required>
                <el-input v-model="form.customsCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="包装规格" required>
                <el-input v-model="form.spec"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="长" required>
                <el-input-number v-model="form.length" :precision="2"/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="宽" required>
                <el-input-number v-model="form.lwidth" :precision="2"/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="高" required>
                <el-input-number v-model="form.high" :precision="2"/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="净重" required>
                <el-input-number v-model="form.netWeight" :precision="2"/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="毛重" required>
                <el-input-number v-model="form.grossWeight" :precision="2"/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="包装要求" required>
                <el-input v-model="form.packing"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="包装明细" required>
                <el-input v-model="form.packingDetail" type="textarea" :rows="3"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="退税率" required>
                <el-input-number  v-model="form.refundedTax" :precision="2"/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="HS Code" required>
                <el-input v-model="form.hscode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="危险品类别" required>
                <el-input v-model="form.dangerousKind"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="质量指标" required>
                <div style="display: flex;flex-direction: column;">
                <ts-select v-model="form.qualityIndexId" file-name="QualityIndexReport" :template="custTemplate" :input-width="300" @updateRow="qualityIndexUpdate" :label="form.qualityIndexName"/>
                <el-input style="margin-top: 10px;" v-model="form.remark" type="textarea" disabled></el-input>
              </div>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="结算成本价" required>
                <el-input-number v-model="form.price" :precision="2"/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="状态" prop="status">
                <el-switch
                  v-model="form.status"
                  size="large"
                  inline-prompt
                  :active-icon="Check"
                  :inactive-icon="Close"
                  active-value="normal"
                  inactive-value="disable"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="button-position">
        <el-button @click="updateVisible">取 消</el-button>
        <el-button type="primary" @click="updateOrder(formRef)">确 定</el-button>
      </div>
      </el-card>
  
  
    </div>
  </template>
  
  <script setup>
  import { reactive, ref, onMounted } from "vue";
  import { ElNotification } from "element-plus";
  import Api from "@/api/model/om";
  import sysApi from "@/api/model/system";
  import tsSelect from "@/components/scSelect/index.vue";
  import tsFormCard from "@/components/tsFormCard/index.vue";
  import { deepClone } from "@/utils/arr";
  const emit = defineEmits(["updatetable"]);
  const props = defineProps({
    paramsData: {
      type: Object,
      defalut: {},
    },
  });
  
  const authEmployeeIds = ref([]);
  const custTemplate = {
    label: "name",
    value: "id",
  };
  // 添加用户数据的对象
  const form = ref({});
  const configData = ref([]);
  const formRef = ref();
  const formRules = reactive({});
  const parentData = ref([]);
  onMounted(() => {
    getInit();
    getParent()
  });
  const getInit = async () => {
    let res = await Api.order.detail.post(props.paramsData);
    console.log(res);
    if (res.code == "200") {
      configData.value = res.configData;
      form.value = res.data;
    }
  };
  const getParent = async () => {
      let params = {
          fileName: "ProductCategoryTreeReport"
      }
      let res = await Api.order.productCategoryTree.post(params);
      parentData.value = res.reportData
  }
  const qualityIndexUpdate = (val) =>{
    form.value.remark = val.qualityIndexRemark
  }
  const updateVisible = (val) => {
    emit("updatetable");
  };
  const updateOrder = async (formRef) => {
    await formRef.validate((valid, fields) => {
      if (valid) {
        updateOrderData();
      }
    });
  };
  
  const updateOrderData = async () => {
    // console.log(form.name);
    form.value.authEmployeeIdsArray = authEmployeeIds.value.map((ele) => {
      return ele.id;
    });
    var params = {
      bean: form.value,
      dataList: addressList.value,
    };
    console.log(params);
    var res = await Api.order.save.post(params);
    if (res.code == 200) {
      ElNotification.success({
        title: "",
        message: "添加成功！",
        duration: 2000,
      });
      emit("updatetable", true);
    }
  };
  </script>
  <style lang="less" scoped>
  :deep(.el-card__header) {
    padding: 10px !important;
    line-height: 22px;
    font-size: 16px;
    height: 45px;
    background: #f6f6f6;
  }
  
  .float-right {
    float: right;
  }
  </style>
  
  
  
  